/*
 * @Description:想定作业
 * @Author: ldx
 * @Date: 2022-09-18 22:35:41
 * @LastEditors: ldx
 * @LastEditTime: 2022-09-29 00:14:00
 */

import { useAntdTable, useRequest } from 'ahooks'
import {
  Button,
  Col,
  div,
  Form,
  Image,
  Input,
  message,
  Modal,
  Popconfirm,
  Row,
  Table
} from 'antd'
import moment from 'moment'
import { useState } from 'react'

import {
  deleteScenarioWork,
  downloadScenarioWork,
  queryDetails,
  queryScenarioWork
} from '@/api/homework/scenario'
import { TextTooltip } from '@/components'
import AuthButton from '@/components/authButton'
import { PageContainer } from '@/components/pageContainer'
const Scenario = () => {
  const [form] = Form.useForm()
  const [isModalOpenDetails, setIsModalOpenDetails] = useState(false)
  const [isModalOpenSnapshot, setIsModalOpenSnapshot] = useState(false)
  const [details, setDetails] = useState<any>()
  /** 想定作业列表 */
  const { tableProps, search } = useAntdTable(queryScenarioWork, {
    form
  })

  /** 想定作业详情 */
  const { runAsync: runQueryDetails } = useRequest(queryDetails, {
    manual: true,
    onSuccess: (res) => {
      setDetails(res.data)
    }
  })
  /** 想定作业删除 */
  const { runAsync: runDeleteScenarioWork } = useRequest(deleteScenarioWork, {
    manual: true,
    onSuccess: () => {
      search.submit()
    }
  })
  /** 想定作业下载 */
  const { runAsync: runDownloadScenarioWork } = useRequest(
    downloadScenarioWork,
    {
      manual: true,
      onSuccess: (res) => {
        const filename = res.headers['content-disposition']
          .split(';')[1]
          .split('=')[1]
        // 创建隐藏的可下载链接
        const eleLink = document.createElement('a')
        eleLink.download = decodeURIComponent(filename)
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        const blob = new Blob([res.data], { type: 'text/html' })
        eleLink.href = URL.createObjectURL(blob)
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
        message.success('下载成功')
      }
    }
  )

  const columns: any[] = [
    {
      title: '序号',
      width: 60,
      align: 'center',
      dataIndex: 'a',
      render: (text: string, record: any, index: number) => {
        return <span>{index + 1}</span>
      }
    },
    {
      title: '想定名称',
      align: 'center',
      dataIndex: 'scenarioName'
    },
    {
      title: '摘要',
      align: 'center',
      ellipsis: true,
      dataIndex: 'description'
    },

    {
      title: '文件名称',
      align: 'center',
      ellipsis: true,
      dataIndex: 'fileName'
    },
    {
      title: '文件路径',
      align: 'center',
      ellipsis: true,
      dataIndex: 'filePath'
    },
    {
      title: '同步时间',
      align: 'center',
      dataIndex: 'syncTime',
      render: (text: string) => {
        return <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
      }
    },
    {
      title: '同步人',
      align: 'center',
      dataIndex: 'syncUserName'
    },
    {
      title: '操作',
      width: 300,
      align: 'center',
      key: 'action',
      render: (text: number, record: any) => (
        <div>
          <AuthButton
            auth={['/**', '/scenario-work/**', '/scenario-work/details/{id}']}
            type="link"
            onClick={() => {
              setIsModalOpenDetails(true)
              runQueryDetails(record.id)
            }}
          >
            详情
          </AuthButton>
          <AuthButton
            auth={['/**', '/scenario-work/**']}
            onClick={() => {
              setIsModalOpenSnapshot(true)
              setDetails(record)
            }}
            type="link"
          >
            快照
          </AuthButton>
          <Popconfirm
            title="确认下载?"
            onConfirm={() => runDownloadScenarioWork(record.id)}
            okText="确认"
            cancelText="取消"
          >
            <AuthButton
              auth={[
                '/**',
                '/scenario-work/**',
                '/scenario-work/download/{id}'
              ]}
              type="link"
            >
              下载
            </AuthButton>
          </Popconfirm>

          <Popconfirm
            title="确认删除信息资料?"
            onConfirm={() => runDeleteScenarioWork(record.id)}
            okText="确认"
            cancelText="取消"
          >
            <AuthButton
              auth={['/**', '/scenario-work/**', '/scenario-work/delete/{id}']}
              type="link"
            >
              删除
            </AuthButton>
          </Popconfirm>
        </div>
      )
    }
  ]
  return (
    <>
      <PageContainer>
        <div>
          <Form form={form}>
            <Row gutter={24}>
              <Col span={5}>
                <Form.Item name="keyword">
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Button onClick={() => search.submit()} type="primary">
                  搜索
                </Button>
              </Col>
            </Row>
          </Form>
          <Table
            columns={columns}
            scroll={{ x: 1400 }}
            rowKey={(record) => record.id}
            {...tableProps}
            pagination={{
              showTotal: (total, range) => {
                console.log('xxx', range)
                const num = Math.ceil(total / 10)
                return (
                  <span style={{ color: '#fff', marginRight: '10px' }}>
                    共{num}页/共{total}条结果
                  </span>
                )
              },
              ...tableProps.pagination
            }}
          />
        </div>
      </PageContainer>
      <Modal
        width={800}
        title="想定作业详情"
        visible={isModalOpenDetails}
        onOk={() => {
          setIsModalOpenDetails(false)
          setDetails(undefined)
        }}
        onCancel={() => {
          setIsModalOpenDetails(false)
          setDetails(undefined)
        }}
      >
        <div className="pl-20px details">
          <div>
            <span className="w-120px inline-block ">想定名称：</span>
            <span>{details?.scenarioName}</span>
          </div>
          <div>
            <span className="w-120px inline-block ">摘要：</span>
            <span className="inline-flex">
              <TextTooltip className="w-520px">
                {details?.description}
              </TextTooltip>{' '}
            </span>
          </div>
          <div>
            <span className="w-120px inline-block ">文件名称：</span>
            <span className="inline-flex">
              <TextTooltip className="w-520px">{details?.fileName}</TextTooltip>{' '}
            </span>
          </div>
          <div>
            <span className="w-120px inline-block ">文件路径：</span>
            <span className="inline-flex">
              <TextTooltip className="w-520px">{details?.filePath}</TextTooltip>
            </span>
          </div>
          <div>
            <span className="w-120px inline-block ">设备快照名称：</span>
            <span className="inline-flex">
              <TextTooltip className="w-520px">{details?.imgName}</TextTooltip>{' '}
            </span>
          </div>
          <div>
            <span className="w-120px inline-block ">设备快照路径：</span>
            <span className="inline-flex">
              <TextTooltip className="w-520px">{details?.imgPath}</TextTooltip>
            </span>
          </div>
          {/* <div>
            <span className="w-120px inline-block ">快照：</span>
            <span>
              <img
                style={{ width: '160px', height: '160px' }}
                src={`${window.location.origin}${details?.imgUri}`}
                alt=""
              />
            </span>
          </div> */}
          <div>
            <span className="w-120px inline-block ">同步时间：</span>
            <span>
              {moment(details?.syncTime).format('YYYY-MM-DD HH:mm:ss')}
            </span>
          </div>
          <div>
            <span className="w-120px inline-block ">同步人：</span>
            <span>{details?.syncUserName}</span>
          </div>
        </div>
      </Modal>
      <Modal
        title="快照"
        visible={isModalOpenSnapshot}
        onCancel={() => setIsModalOpenSnapshot(false)}
        footer={null}
        width={916}
      >
        <Image
          width={870}
          src={`${window.location.origin}${details?.imgUri}`}
          fallback=""
        />
      </Modal>
    </>
  )
}

export default Scenario
